<template>
  <MainContent title="勋章管理" back>
    <template #search-bar>
      <SearchBar inline>
        <template #normal>
          <el-form-item label="勋章名称">
            <el-input v-model="tableForm.medalName" clearable placeholder="请输入勋章名称"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="tableForm.status" placeholder="请选择状态">
              <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="tableForm.type" placeholder="请选择类型">
              <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="primary" @click="showOrderExport = true">新增勋章</el-button>
          </el-form-item>
        </template>

      </SearchBar>
    </template>
    <LayoutTable ref="marketingModel" url="/community/back/medalInfo/pageMedal" :setSearch="setSearch" disable-auto-height
      :param="tableForm">
      <el-table-column prop="medalName" label="勋章名称" min-width="150"></el-table-column>

      <el-table-column prop="medalImg" label="勋章图片" min-width="100">
        <template #default="scope">
          <el-image fit="fill" :src="scope.row.medalImg">
          </el-image>
        </template>
      </el-table-column>

      <el-table-column prop="getMedalUsers" label="获取勋章人数" min-width="100"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间" min-width="100">
        <template #default="scope">
          {{ dateFormat(scope.row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" min-width="100">
        <template #default="scope">
          <el-switch :value="scope.row.status" :active-value="1" :inactive-value="0" @click="setStatus(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="journeyStrategyNum" label="操作" width="150">
        <template #default="scope">
          <div v-if="scope.row.type == 1">
            <el-button @click="toEdit(scope.row)" link type="primary">编辑</el-button>
            <el-button @click="del(scope.row)" link type="primary">删除</el-button>
          </div>
        </template>
      </el-table-column>

    </LayoutTable>

    <Add-Order :showOrderExport="showOrderExport" :modelData="modelData" @confirm="confirm" @cancel="cancel"></Add-Order>
  </MainContent>
</template>
<script>
export default {
  name: 'OrderManag'
}
</script>
<script setup>
import integralApi from "@/api/integralApi.js";
import AddOrder from "./component/addOrder.vue";
import MarketingModelApi from "@/api/marketingModelApi.js";
import { dateFormat } from "@/utils/filters";
const tableForm = ref({
  medalName: "",
  status: null,
  type: null,
});

const modelData = ref({ id: null })
const statusList = ref([
  { name: '全部', id: null },
  { name: '开启', id: 1 },
  { name: '关闭', id: 0 },
])
const typeList = ref([
  { name: '全部', id: null },
  { name: '自定义', id: 1 },
  { name: '固定', id: 2 },
])


const showOrderExport = ref(false)
const defaultTime2 = [
  new Date(2000, 1, 1, 12, 0, 0),
  new Date(2000, 2, 1, 8, 0, 0),
] // '12:00:00', '08:00:00'
const setSearch = ref(Number());
const marketingModel = ref();



const setStatus = (row) => {
  ElMessageBox.confirm(
    '是否修改状态',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'Warning',
    }
  )
    .then(() => {
      setEnableMedal(row)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消操作',
      })
    })
}

const del = (row) => {
  ElMessageBox.confirm(
    '是否删除',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'Warning',
    }
  )
    .then(() => {
      deleteMedal(row)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消操作',
      })
    })
}


const toEdit = (row) => {
  modelData.value = JSON.parse(JSON.stringify(row))
  showOrderExport.value = true
}

// 修改状态
const setEnableMedal = async (row) => {
  let rs = await integralApi.setEnableMedal({ id: row.id })
  if (rs.code === 200) {
    ElMessage({
      message: '修改状态成功',
      type: 'success',
    })
    onSearch()
  }

}

// 删除
const deleteMedal = async (row) => {
  let rs = await integralApi.deleteMedal({ id: row.id })
  if (rs.code === 200) {
    ElMessage({
      message: '删除勋章成功',
      type: 'success',
    })
    onSearch()
  }
}

const confirm = () => {
  onSearch();
  cancel()
};
const cancel = () => {
  showOrderExport.value = false;
  modelData.value = { id: null }
  setTimeout(() => {
  }, 500);
};
const onSearch = () => {
  setSearch.value++;
};

const store = useStore();
// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  () => {
    onSearch();
  },
  {
    deep: true
  }
)
</script>

<style lang="scss" scoped>
:deep(.el-image) {
  border-radius: 3px;
  margin: 10px;
  width: 50px;
  height: 50px;
}
</style>
